<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 20px;
            border: 1px solid pink;
        }
    </style>
</head>

<body>

    <div id="root">
        <h1>今天天气很{{day}}</h1>
        <input type="button" value="切换天气" @click="change"><br><br>
        <input type="button" value="点击我a加1" @click="numbers.a++">
        <h2>{{numbers.a}}</h2>
        <br><br>
        <input type="button" value="点击我b加1" @click="numbers.b++">
        <h2>{{numbers.b}}</h2>
    </div>

    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    isHot: true,
                    numbers: {
                        a: 1,
                        b: 1
                    }
                }
            },
            methods: {
                change() {
                    this.isHot = !this.isHot;
                }

            },
            computed: {
                day() {
                    return this.isHot ? "炎热" : "凉爽";
                }

            },

            // 监视属性
            watch: {
                // 只监视a的值
                // "numbers.a": {
                //     handler(newValue, oldValue) {
                //         console.log("a的值被修改了", newValue, oldValue);
                //     }
                // },
                // 只监视b的值
                // "numbers.b": {
                //     handler(newValue, oldValue) {
                //         console.log("b的值被修改了", newValue, oldValue);
                //     }
                // },
                // ......
                // 如果我们有100个k 肯定不能这样一个一个写
                numbers: {
                    // vue默认是可以检测到多层级数据发生改变的，但是vue给程序员使用的watch默认是不能检测到多层级数据的改变的
                    // 如果需要检测多层级需要设置deep为true
                    deep: true,
                    handler(newValue, oldValue) {
                        console.log("值被修改了", newValue, oldValue);
                    }
                },

                isHot: {
                    // immediate: true,//初始化时让handler调用一下
                    // handler说明时候调用？当isHot发生改变的时候调用 并且能获取两个参数 新的值，旧的值
                    handler(newValue, oldValue) {
                        console.log("isHot被修改了", newValue, oldValue);
                    }
                }
            }
        });
        // vm.$watch("isHot", {
        //     immediate: true,
        //     handler(newValue, oldValue) {
        //         console.log("isHot被修改了", newValue, oldValue);
        //     }

        // })
    </script>

</body>

</html>